<template>
	<div class="system-user">
		<div class="pane">
			<!-- 成员列表 -->
			<div class="user">
				<div class="header">
					<div class="icon" @click="deptExpand">
						<i class="el-icon-arrow-left" v-if="isExpand"></i>
						<i class="el-icon-arrow-right" v-else></i>
					</div>

					<span>会员列表</span>
				</div>

				<div class="container">
					<cl-crud :ref="setRefs('crud')" :on-refresh="onRefresh" @load="onLoad">
						<el-row type="flex">
							<cl-refresh-btn />
							<cl-add-btn />
							<el-button
								type="warning"
								:disabled="selects.ids.length < 1"
								@click="setMultiStatus"
								>切换状态</el-button
							>
							<cl-flex1 />
							<div class="cl-filter-group">
								<cl-filter label="状态">
									<el-select size="mini" v-model="filterForm.status" clearable>
										<el-option value="" label="全部" />
										<el-option :value="0" label="禁用" />
										<el-option :value="1" label="启用" />
									</el-select>
								</cl-filter>

								<cl-filter label="关键词">
									<el-input
										placeholder="账号姓名昵称包含关键词"
										clearable
										v-model="filterForm.keyWord"
										size="mini"
									/>
								</cl-filter>
								<el-button type="primary" @click="formToSearch">搜索</el-button>
								<el-button @click="formReset">重置</el-button>
							</div>
						</el-row>

						<el-row>
							<cl-table
								:ref="setRefs('table')"
								v-bind="table"
								@selection-change="onSelectionChange"
							>
								<!-- 状态 -->
								<template #column-status="{ scope }">
									<el-tooltip
										effect="dark"
										content="点击切换状态"
										placement="left"
									>
										<el-button
											type="success"
											plain
											v-if="scope.row.status == 1"
											@click="setStatus(scope.row)"
											>正常</el-button
										>
										<el-button
											type="warning"
											plain
											v-else
											@click="setStatus(scope.row)"
											>禁用</el-button
										>
									</el-tooltip>
								</template>
								<!-- 单个重置密码 -->
								<template #slot-resetpwd-btn="{ scope }">
									<el-button
										v-permission="service.member.permission.reSetPwd"
										type="text"
										size="mini"
										@click="rowReSetPwd(scope.row)"
										>重置密码</el-button
									>
								</template>
							</cl-table>
						</el-row>

						<el-row type="flex">
							<cl-flex1 />
							<cl-pagination />
						</el-row>

						<cl-upsert
							:ref="setRefs('upsert')"
							:items="upsert.items"
							:on-submit="onUpsertSubmit"
						>
							<template #slot-tips="{ scope }">
								<div>
									<i class="el-icon-warning"></i>
									<span style="margin-left: 6px">新增用户默认密码为：123456</span>
								</div>
							</template>
							<template #slot-mobile="{ scope }">
								<el-input
									v-model="scope.mobile"
									:disabled="scope.id > 0"
									placeholder="请填写手机号码"
								/>
							</template>
						</cl-upsert>
					</cl-crud>
				</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts">
import { computed, defineComponent, inject, reactive, ref, watch } from "vue";
import { useStore } from "vuex";
import { useRefs } from "/@/core";
import { Table, Upsert } from "/$/crud/types";
import Input from "../../chat/components/input.vue";

export default defineComponent({
	name: "member-list",
	components: { Input },
	setup() {
		const service = inject<any>("service");
		const store = useStore();
		const { refs, setRefs } = useRefs();

		// 是否展开
		const isExpand = ref<boolean>(true);

		// 选择项
		const selects = reactive<any>({
			dept: {},
			ids: []
		});

		// 部门列表
		const dept = ref<any[]>([]);

		// 表格配置
		const table = reactive<Table>({
			props: {
				"default-sort": {
					prop: "create_at",
					order: "descending"
				}
			},
			columns: [
				{
					type: "selection",
					width: 60
				},
				{
					prop: "mobile",
					label: "账号",
					minWidth: 150
				},
				// {
				// 	prop: "headImg",
				// 	label: "头像"
				// },
				{
					prop: "realname",
					label: "姓名",
					minWidth: 150
				},
				{
					prop: "nickname",
					label: "昵称",
					minWidth: 150
				},
				{
					prop: "remark",
					label: "备注",
					width: 80
				},
				{
					prop: "status",
					label: "状态",
					width: 80,
					dict: [
						{
							label: "正常",
							value: 1,
							type: "success"
						},
						{
							label: "禁用",
							value: 0,
							type: "danger"
						}
					]
				},
				{
					type: "op",
					buttons: ["slot-resetpwd-btn", "edit"],
					width: 120
				}
			]
		});

		// 新增、编辑配置
		const upsert = reactive<Upsert>({
			items: [
				{
					prop: "mobile",
					label: "手机号码",
					span: 12,
					component: {
						name: "slot-mobile",
						props: {
							placeholder: "请填写手机号码"
						}
					},
					rules: [
						{
							required: true,
							message: "手机号码不能为空"
						}
					]
				},
				{
					prop: "realname",
					label: "姓名",
					span: 12,
					component: {
						name: "el-input",
						props: {
							placeholder: "请填写姓名"
						}
					},
					rules: {
						required: true,
						message: "姓名不能为空"
					}
				},
				{
					prop: "nickname",
					label: "昵称",
					span: 12,
					component: {
						name: "el-input",
						props: {
							placeholder: "请填写昵称"
						}
					},
					rules: {
						required: true,
						message: "昵称不能为空"
					}
				},
				{
					prop: "status",
					label: "状态",
					value: 1,
					span: 12,
					component: {
						name: "el-radio-group",
						options: [
							{
								label: "正常",
								value: 1
							},
							{
								label: "禁用",
								value: 0
							}
						]
					}
				},
				{
					prop: "remark",
					label: "备注",
					span: 24,
					component: {
						name: "el-input",
						props: {
							placeholder: "请填写备注",
							type: "textarea",
							rows: 4
						}
					}
				},
				{
					prop: "tips",
					hidden: ":isEdit",
					component: {
						name: "slot-tips"
					}
				}
			]
		});

		// 浏览器信息
		const browser = computed(() => store.getters.browser);

		// 监听屏幕大小变化
		watch(
			() => browser.value.isMini,
			(val: boolean) => {
				isExpand.value = !val;
			},
			{
				immediate: true
			}
		);

		// crud 加载
		function onLoad({ ctx, app }: any) {
			ctx.service(service.member).done();
			app.refresh();
		}

		// 刷新列表
		function refresh(params: any) {
			refs.value.crud.refresh(params);
		}

		// 刷新监听
		async function onRefresh(params: any, { next, render }: any) {
			const { list } = await next(params);

			render(
				list.map((e: any) => {
					if (e.roleName) {
						e.roleNameList = e.roleName.split(",");
					}

					e.status = Boolean(e.status);

					return e;
				})
			);
		}

		// 提交钩子
		function onUpsertSubmit(_: boolean, data: any, { next }: any) {
			next({
				...data
			});
		}

		// 多选监听
		function onSelectionChange(selection: any[]) {
			selects.ids = selection.map((e) => e.id);
		}

		return {
			service,
			refs,
			isExpand,
			selects,
			dept,
			table,
			upsert,
			browser,
			setRefs,
			onLoad,
			refresh,
			onRefresh,
			onUpsertSubmit,
			onSelectionChange
		};
	},
	data() {
		return {
			filterForm: {
				status: "",
				keyWord: ""
			}
		};
	},
	methods: {
		setMultiStatus() {
			const that = this;
			if (this.selects.ids.length < 1) {
				this.$message({
					type: "warning",
					message: "请选择需要操作的账号"
				});
				return false;
			}
			this.$confirm("此操作将切换已选中账号的状态, 是否继续?", "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning"
			})
				.then(() => {
					this.service.member
						.setStatus({ ids: this.selects.ids })
						.then((res) => {
							this.$message({
								type: "success",
								message: "切换成功"
							});
							setTimeout(() => {
								that.refresh();
							}, 1000);
						})
						.catch((err) => {
							this.$message({
								type: "error",
								message: "失败," + err
							});
						});
				})
				.catch(() => {});
		},
		setStatus(_item) {
			const that = this;
			this.$confirm("此操作将切换当前账号的状态, 是否继续?", "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning"
			})
				.then(() => {
					this.service.member
						.setStatus({ ids: [_item.id] })
						.then((res) => {
							this.$message({
								type: "success",
								message: "切换成功"
							});
							_item.status = !_item.status;
						})
						.catch((err) => {
							this.$message({
								type: "error",
								message: "失败," + err
							});
						});
				})
				.catch(() => {});
		},
		rowReSetPwd(_row) {
			console.log(_row);
			const that = this;
			that.$confirm("确认重置《" + _row.mobile + "》的密码吗？", "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning"
			})
				.then(() => {
					that.service.member
						.reSetPwd({ id: _row.id })
						.then((res) => {
							this.$message({
								type: "success",
								message: "重置成功"
							});
						})
						.catch((err) => {
							this.$message({
								type: "error",
								message: "失败," + err
							});
						});
				})
				.catch(() => {});
		},
		formReset() {
			this.filterForm.status = "";
			this.filterForm.keyWord = "";
		},
		formToSearch() {
			this.refresh({
				page: 1,
				...this.filterForm
			});
		}
	}
});
</script>

<style lang="scss" scoped>
.system-user {
	.pane {
		display: flex;
		height: 100%;
		width: 100%;
		position: relative;
	}

	.dept {
		height: 100%;
		width: 300px;
		max-width: calc(100% - 50px);
		background-color: #fff;
		transition: width 0.3s;
		margin-right: 10px;
		flex-shrink: 0;

		&._collapse {
			margin-right: 0;
			width: 0;
		}
	}

	.user {
		width: calc(100% - 310px);
		flex: 1;

		.header {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 40px;
			position: relative;
			background-color: #fff;

			span {
				font-size: 14px;
				white-space: nowrap;
				overflow: hidden;
			}

			.icon {
				position: absolute;
				left: 0;
				top: 0;
				font-size: 18px;
				cursor: pointer;
				background-color: #fff;
				height: 40px;
				width: 80px;
				line-height: 40px;
				padding-left: 10px;
			}
		}
	}

	.dept,
	.user {
		overflow: hidden;
		.container {
			height: calc(100% - 40px);
		}
	}

	@media only screen and (max-width: 768px) {
		.dept {
			width: calc(100% - 100px);
		}
	}
}
</style>
